<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 表单</el-breadcrumb-item>
        <el-breadcrumb-item>基本表单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!-- <div class="form-box"> -->
      <el-button @click=" addVisible= true; form.name='';form.id=0, form.displayName='',form.description = '', form.isStatic = true,permissions=[]">新增</el-button>
      <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="角色名称" sortable width="300">
        </el-table-column>
        <el-table-column prop="displayName" label="显示名称">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total='totalNum'>
        </el-pagination>
      </div>
      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="form.name">
            </el-input>
          </el-form-item>
          <el-form-item label="显示名称">
            <el-input v-model="form.displayName">
            </el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="form.description">
            </el-input>
          </el-form-item>

          <el-form-item label="权限">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="form.permissions" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="op in options" :label="op.name" :key="op.name">{{op.displayName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="editVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="新增" :visible.sync="addVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="form.name">
            </el-input>
          </el-form-item>
          <el-form-item label="显示名称">
            <el-input v-model="form.displayName">
            </el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="form.description">
            </el-input>
          </el-form-item>

          <el-form-item label="权限">
            <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="form.permissions" @change="handleCheckedCitiesChange1">
              <el-checkbox v-for="op in options" :label="op.name" :key="op.name">{{op.displayName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="addVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 删除提示框 -->
      <el-dialog title="删除" width="300px" :visible.sync="delVisible" left>
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteRow">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除提示框 -->
      <!-- <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog> -->

    </div>

  </div>
</template>
<script>
import {
  GetAllRoles,
  GetAllPermissions,
  GetRolesInfo,
  UpdateRolesInfo,
  AddRolesInfo
} from "../../../service/service.jsx";
export default {
  name: "Roles",
  data: function() {
    return {
      dataList: [],
      checkAll: false, //编辑页面
      checkAll1: false, //新增页面
      editVisible: false,
      addVisible: false,
      isIndeterminate: true,
      isIndeterminate1: true,
      options: [], //权限列表
      totalNum: 0,
      cur_page: 1,
      pagesize: 10,
      multipleSelection: [],
      delVisible: false,
      form: {
        id: 0,
        name: "", //角色名称
        displayName: "", //显示名称
        description: "", //描述
        isStatic: true,
        permissions: [] //权限
      },
      idx: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    getData() {
      GetAllPermissions(this.$axios, {}, {}).then(res => {
        console.log("角色", res);
        let list = [];
        res.data.result.items.map((x, i) => {
          let item = {
            displayName: x.displayName,
            name: x.name
          };
          list.push(item);
        });
        this.options = list; // res.data.Result;
      });

      GetAllRoles(
        this.$axios,
        // { PageIndex: this.cur_page, PageSize: this.pagesize },
        {},
        {}
      ).then(res => {
        console.log("res", res);
        this.dataList = res.data.result.items;
        this.totalNum = res.data.result.totalCount;
      });
    },

    deleteRow() {
      let id = this.form.id;
      console.log("删除", id);
      var params = new URLSearchParams();
      params.append("id", id); //传入后台的参数
      DeleteUser(this.$axios, { id: this.form.id }, {}).then(res => {
        this.getData();
      });
      this.delVisible = false;
    },
    handleEdit(index, row) {
      this.idx = index;
      let item = this.dataList[index];
      GetRolesInfo(this.$axios, { id: item.id }, {}).then(res => {
        console.log("res", res);
        this.form = {
          id: res.data.result.id,
          name: res.data.result.name, //角色名称
          displayName: res.data.result.displayName, //显示名称
          description: res.data.result.description, //描述
          isStatic: true,
          permissions: res.data.result.permissions //权限
        };
        this.editVisible = true;
      });

      console.log("编辑", item);
    },
    handleDelete(index, row) {
      this.idx = index;
      let item = this.dataList[index];
      this.form = {
        id: item.Id,
        RoleName: item.RoleName
      };
      this.delVisible = true;
    },

    handleCheckAllChange(val) {
      this.form.permissions = val ? ["Admin"] : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.options.length;
    },

    handleCheckAllChange1(val) {
      this.form.permissions = val ? ["Admin"] : [];
      this.isIndeterminate1 = false;
    },

    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.options.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.options.length;
    },

    onSubmit() {
      let filer = {
        description: this.form.description,
        displayName: this.form.displayName,
        id: this.form.id,
        isStatic: true,
        name: this.form.name,
        permissions: this.form.permissions
      };
      AddRolesInfo(this.$axios, filer, {}).then(res => {
        console.log("res", res);
        this.addVisible = false;
        this.getData();
        this.$message.success("新增成功");
      });
    },


    addSubmit(){
      let filer = {
              description: this.form.description,
              displayName: this.form.displayName,
              id: this.form.id,
              isStatic: true,
              name: this.form.name,
              permissions: this.form.permissions
            };
      AddRolesInfo(this.$axios, filer, {}).then(res => {
        console.log("res", res);
        this.editVisible = false;
        this.getData();
        this.$message.success("修改成功");
      });

    },


    handleSelectionChange() {
      this.multipleSelection = val;
    }
  },
  //计算属性
  computed: {
    data() {
      return this.dataList;
    }
  }
};
</script>
